<div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="ntModalLabel">{:strtoupper(lang("product_category_datils"))}</h4>
    </div>
    <div class="modal-body" id="openmain">
        <input type="hidden" name="" id="id" value="{$id|default=''}">
       <div class="row clearfix" style="padding-top:12px">
            <div class="col-md-12 column">
                <ul class="nav nav-tabs">
                    <li role="presentation" :class="{'active':index==0}" v-for="(langitem,index) in langs" @click="changelang(langitem.code)">
                        <a :href="'#'+langitem.code" :aria-controls="langitem.code" role="tab" data-toggle="tab">{{langitem.name}}</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="zh">
                <table class="table table-striped table-hover ntTable" style="padding-top:0" id='zh'>
                    <tbody>
                        <tr>
                            <td>{:strtoupper(lang("top_rating"))}</td>
                            <td> {{parentcate}}</td>
                        </tr>
                        <tr>
                            <td>{:strtoupper(lang("product_category_name"))}</td>
                            <td>{{datas.name}}</td>
                        </tr>
                        <tr>
                            <td>{:strtoupper(lang("hide"))}</td>
                            <td>{{datas.is_hide}}</td>
                        </tr>
                        <tr>
                            <td>{:strtoupper(lang('delete'))}</td>
                            <td>{{datas.is_del}}</td>
        
                        </tr>
                           <tr>
                            <td>{:strtoupper(lang("subcaterories_quantity"))}</td>
                            <td>{{childCount}}</td>
                        </tr>
                           <tr>
                            <td>{:strtoupper(lang("product_quantity"))}</td>
                            <td>{{proCount}}</td>
                        </tr>
                           <tr>
                            <td>{:strtoupper(lang("binding_product_properties"))}</td>
                            <td>{{attr}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span>{:strtoupper(lang('close'))}</button>
    </div>
    <script>
    
    new Vue({
        el:'#openmain',
        data:()=>({
            lang:'',
            langs:[],
            datas:[],
            attr:'',
            childCount:0,
            proCount:0,
            parentcate:'',
        }),
        mounted(){
            $.ajax({
                url:'/admin/api/getLangType',
                type:'post',
                success:data=>{
                    this.langs = JSON.parse(data)
                }
            })
            this.getdata()
        },
        methods:{
            getdata(){
                if(this.lang)
                var url = '/admin/procat/catedetail?request=requsetAjax&id='+$('#id').val()+"&lang="+this.lang;
                else
                var url = '/admin/procat/catedetail?request=requsetAjax&id='+$('#id').val();
                
                $.ajax({
                    url:url,
                    type:'post',
                    success:data=>{
                        data=JSON.parse(data)
                        this.datas = data.data.data
                        this.parentcate = data.data.parentcate
                        this.proCount = data.data.proCount
                        this.attr = data.data.attr
                    }
                })
            },
            changelang(lang){
                this.lang=lang
                this.getdata()
            }
        }
    })
</script>
